<script setup lang="ts">
	import { DATA_MAIN_HOT_DATA } from "../../utils/data";
	import { numString } from "../../utils/util"
	import { safeAreaInsetsTop, menuButtonBarHeight } from "../../utils/system";
	import { onMounted, reactive, ref } from "vue";

	onMounted(() => {
		setTimeout(() => {
			startPlay()
		}, 1000)
	})
	// 当前播放的视频下标
	const nowPlayingVideoIndex = ref(0)
	const handleChange = (event) => { }
	const transition = (event) => {
		nowPlayingVideoIndex.value = -1
		for (const item of DATA_MAIN_HOT_DATA) {
			// #ifdef APP
			pauseDomVideoPlayer(item.id)
			// #endif
			// #ifndef APP
			const videoContext = uni.createVideoContext(item.id, this);
			videoContext.pause()
			// #endif
		}
	}
	const animationfinish = (event) => {
		nowPlayingVideoIndex.value = event.detail.current
		setTimeout(() => {
			startPlay()
		}, 1000)
	}

	const domVideoPlayerRefs = reactive({})
	const setDomVideoPlayerRef = (el, id : string) => {
		if (el) {
			domVideoPlayerRefs[id] = el
		} else {
			delete domVideoPlayerRefs[id]
		}
	}
	const playDomVideoPlayer = (id : string) => {
		const child = domVideoPlayerRefs[id]
		if (child) {
			child.playDomVideoPlayer()
		}
	}
	const pauseDomVideoPlayer = (id : string) => {
		const child = domVideoPlayerRefs[id]
		if (child) {
			child.pauseDomVideoPlayer()
		}
	}
	const startPlay = () => {
		if (nowPlayingVideoIndex.value < 0) return
		const playId = DATA_MAIN_HOT_DATA[nowPlayingVideoIndex.value].id
		if (playId == null) return
		// #ifdef APP
		playDomVideoPlayer(playId)
		// #endif
		// #ifndef APP
		const videoContext = uni.createVideoContext(playId, this);
		videoContext.play()
		// #endif
	}
</script>
<template>
	<view class="main-hot-container">
		<swiper class="swiper" :vertical="true" :current="0" circular @change="handleChange"
			@animationfinish="animationfinish" @transition="transition">
			<swiper-item v-for="(item, index) in DATA_MAIN_HOT_DATA" class="swiper-item" :key="item.id">
				<com-video class="video" :videoUrl="item.video" :videoId="item.id"
					v-show="index === nowPlayingVideoIndex" :ref="el => setDomVideoPlayerRef(el, item.id)"></com-video>
				<image :src="item.image" mode="aspectFill" class="video-cover" v-show="index !== nowPlayingVideoIndex">
				</image>
				<view class="left-bottom">
					<view class="author">
						<image :src="item.avatar" mode="aspectFill" class="avatar"></image>
						<text class="name">{{item.author}}</text>
						<view class="favor">关注</view>
					</view>
					<view class="remark">
						<view class="tag">热评</view>
						<view class="content">{{item.remark}}</view>
					</view>
					<view class="reply">
						<view class="note">{{item.replay}}条回复</view>
						<uni-icons type="down" size="16" color="#fff"></uni-icons>
					</view>
				</view>
				<view class="right-aside">
					<view class="aside-block">
						<i class="iconfont icon-aixin-xian"></i>
						<text>{{numString(item.love_num, 1)}}</text>
					</view>
					<view class="aside-block">
						<i class="iconfont icon-remark"></i>
						<text>{{numString(item.remark_num, 1)}}</text>
					</view>
					<view class="aside-block">
						<i class="iconfont icon-favorite"></i>
						<text>{{numString(item.star_num, 1)}}</text>
					</view>
					<view class="aside-block">
						<i class="iconfont icon-good"></i>
						<text>{{numString(item.good_num, 1)}}</text>
					</view>
					<view class="aside-block">
						<i class="iconfont icon-24px"></i>
						<text>{{numString(item.share_num, 1)}}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- #ifdef MP-WEIXIN -->
		<i class="iconfont icon-a-searchbar_search"
			:style="{top: `calc(${safeAreaInsetsTop}px + ${menuButtonBarHeight}px)`}"></i>
		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO -->
		<i class="iconfont icon-a-searchbar_search"
			:style="{top: `calc(${safeAreaInsetsTop}px + ${menuButtonBarHeight}px + 30rpx)`}"></i>
		<!-- #endif -->
		<!-- #ifdef WEB-->
		<i class="iconfont icon-a-searchbar_search"></i>
		<!-- #endif -->
		<!-- #ifdef APP-->
		<i class="iconfont icon-a-searchbar_search" :style="{top: `${safeAreaInsetsTop}px`}"></i>
		<!-- #endif -->
	</view>
</template>
<style scoped lang="scss">
	@import "@/static/font/iconfont.css";

	.main-hot-container {
		height: 100%;
		background-color: #655d5699;

		.icon-a-searchbar_search {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			color: white;
			font-size: 40rpx;
		}

		.swiper {
			width: 100vw;
			height: 100%;

			.swiper-item {
				position: relative;
				height: 100vh;

				.video-cover {
					height: 100%;
					width: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 0;
				}

				.cover-view {
					width: 300rpx;
					height: 300rpx;
					background-color: red;
					position: fixed;
					left: 20rpx;
					top: 100rpx;
				}

				.left-bottom {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
					padding: 0 0 40rpx 30rpx;

					.author {
						display: flex;
						flex-direction: row;
						align-items: center;

						.avatar {
							width: 70rpx;
							height: 70rpx;
							border-radius: 100%;
						}

						.name {
							color: white;
							margin: 0 20rpx;
						}

						.favor {
							width: 110rpx;
							height: 50rpx;
							line-height: 50rpx;
							background-color: #ea404a;
							color: white;
							font-size: $font-size-24;
							border-radius: 80rpx;
							text-align: center;
						}
					}

					.remark {
						display: flex;
						flex-direction: row;
						align-items: center;
						margin: 20rpx 0 10rpx 5rpx;

						.tag {
							color: white;
							font-size: $font-size-24;
							padding: 4rpx 10rpx;
							background-color: #655d5699;
							border-radius: 8rpx;
						}

						.content {
							color: white;
							margin-left: 20rpx;
							font-size: $font-size-28;
						}
					}

					.reply {
						display: flex;
						flex-direction: row;
						align-items: center;
						color: white;
						opacity: 0.5;
						margin-left: 20rpx;
						font-size: $font-size-28;

						.note {
							margin-right: 10rpx;
						}
					}
				}

				.right-aside {
					display: flex;
					flex-direction: column;
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;

					.aside-block {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;
						color: white;
						margin-bottom: 30rpx;
						height: 90rpx;

						.iconfont {
							font-size: 55rpx;
							color: white;
							text-shadow: 0 0 2rpx rgba(0, 0, 0, 0.6);
						}

						text,
						.text {
							margin-top: 5rpx;
							font-size: $font-size-20;
							text-shadow: 0 0 2rpx rgba(0, 0, 0, 0.6);
						}
					}

					.aside-block:nth-child(2)>.iconfont {
						font-size: 50rpx;
					}
				}
			}
		}
	}
</style>